<template>
  <div>
    <div class="card" v-if="list.length">
      <div
        v-for="item in list"
        :key="item.id"
        @click="goPage(item)"
        class="card-item"
      >
        <p v-if="item.isTop == '1'" class="topping">置顶</p>
        <p
          class="cover-photo"
          :style="`background-image:url(${item.coverPath})`"
        ></p>
        <p class="remark">{{ item.seriesName }}</p>
        <div class="bottom">
          <p class="header-name">
            <Avatar :src="item.expertFace" size="small" />
            <span style="margin-left: 10px">{{ item.expertName }}</span>
          </p>
          <p v-if="item.isCharge == '0'" class="is-charge0">免费</p>
          <p v-else>
            <span v-if="item.buyFlag == 'true'" class="is-charge1"
              >已购买</span
            >
            <span v-else class="money"
              ><span>￥</span
              >{{ item.price ? item.price.toFixed(2) : "" }}</span
            >
          </p>
        </div>
      </div>
    </div>

    <empty v-else />

    <!-- <div class="page" v-if="list.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="params.pageSize"
        show-total
      />
    </div> -->
  </div>
</template>

<script>
import * as experts from "@/api/experts.js";
export default {
  data() {
    return {
      params: {
        pageNumber: 1,
        pageSize: 8,
        type: "1002001",
      },
      list: [],
      total: 0,
    };
  },
  props: {
    expertId: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取列表数据
    getList() {
      experts
        .getCouseList({
          expertId: this.$route.query.id,
        })
        .then(({ code, result }) => {
          if (code === 200 && result) {
            this.list = result;
          }
        });
    },
    //切换分页
    currentHandle(current) {
      this.params.pageNumber = current;
      this.getList();
    },

    //跳转详情
    goPage(item) {
      this.$router.push({
        path: "/courseDetail",
        query: {
          isCharge: item.isCharge,
          payStatus: item.payStatus,
          id: item.id,
        },
      });
      sessionStorage.setItem("name", "courseDetail");
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  justify-items: start;
  justify-content: center;
  .card-item {
    width: 90%;
    height: 255px;
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px #efeded;
    border-radius: 5px;
    margin-top: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .topping {
      position: absolute;
      left: calc(-25 / 1920 * 100vw);
      top: calc(15 / 1920 * 100vw);
      width: calc(110 / 1920 * 100vw);
      height: calc(25 / 1920 * 100vw);
      line-height: calc(25 / 1920 * 100vw);
      text-align: center;
      color: #fff;
      font-size: calc(10 / 1920 * 100vw);
      background-color: #fb6d74;
      transform: rotate(320deg);
      transform-origin: center;
    }
    .remark {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
      color: #52555a;
      margin: 10px 0;
      padding: 0 10px;
      font-size: 14px;
      height: 42px;
    }
    .cover-photo {
      width: 100%;
      height: 160px;
      background-size: cover;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      .header-name {
        color: #63676e;
        font-size: 10px;
        display: flex;
        align-items: center;
      }
      .money {
        margin-left: auto;
        display: block;
        font-size: calc(18 / 1920 * 100vw);
        color: #f4333c !important;
        > span {
          font-size: calc(12 / 1920 * 100vw);
        }
      }
    }
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.ivu-checkbox-wrapper {
  margin-right: 0;
}
.is-charge0 {
  color: #0bd7d7;
  display: block;
  padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
  border-radius: calc(3 / 1920 * 100vw);
  background: #dbf9f9;
  font-size: 12px;
  text-align: center;
  line-height: calc(18 / 1920 * 100vw);
}

.is-charge1 {
  color: #ff900d;
  display: block;
  padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
  border-radius: calc(3 / 1920 * 100vw);
  background: #ffeedb;
  font-size: 12px;
  text-align: center;
  line-height: calc(18 / 1920 * 100vw);
}
</style>